<template>
    <el-card>
        <my-bread level1="商品管理" level2="分类参数"></my-bread>

        <el-table :data="tableData" stripe>
            <el-tree-grid
                label="分类名称"
                prop="catname"
                treeKey="catid"
                parentKey="catpid"
                levelKey="catlevel"
                childKey="children"
            >
            </el-tree-grid>
            <el-table-column prop="date" label="级别" width="245">
            </el-table-column>
            <el-table-column prop="name" label="是否有效" width="245">
            </el-table-column>
            <el-table-column prop="address" label="操作" width="245">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        plain
                        type="primary"
                        icon="el-icon-edit"
                        circle
                        @click="edit(scope.$index, scope.row)"
                    ></el-button>
                    <el-button
                        size="mini"
                        plain
                        type="danger"
                        icon="el-icon-delete"
                        circle
                        @click="del(scope.$index, scope.row)"
                    ></el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>
<script>
var ElTreeGrid = require("element-tree-grid");

export default {
    components: {
        ElTreeGrid,
    },
    data() {
        return {
            tableData: [
                {
                    catpid: 0,
                    catlevel: 0,
                    children: "3",
                    catname: "大家电",
                    catid: 1,
                    date: "一级",
                    name: "是",
                },
                {
                    date: "一级",
                    name: "是",
                },
                {
                    date: "一级",
                    name: "是",
                },
            ],
        };
    },
    methods: {
        edit() {},
        del() {},
    },
};
</script>
<style >
.el-table {
    width: 85%;
    margin-top: 20px;
}
</style>